<template>
  <div class="header pang">
    <div class="left cen">
      <van-nav-bar title="" left-text="" left-arrow @click="onClickLeft">
        <template #right class="h">
          <van-icon name="search" />
        </template>
      </van-nav-bar>
    </div>
    <div class="center">
      <span class="span">文章详情</span>
    </div>
    <div class="right cen">
      <van-cell title="" @click="showShare = true" />
      <van-icon name="share" size="1.5em" />
      <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
  </div>
  <span class="h3 pang">万字好文python从入门到精通指南</span>
  <div class="baner h3 pang">
    <div class="left h3 float">
      <van-icon name="friends-o" color="#1989fa" size="3em" />
    </div>
    <div class="box float">
      <p>Daisy</p>
      <span class="min-span">2018-05-06 10:56:56</span>
    </div>
    <div class="r">
      <!-- <van-button plain type="primary"><span class="h">+</span>关注</van-button> -->
      <div>
        <button
          @click="favor"
          class="my_button"
          :style="{ backgroundColor: bg_color, color: ft_color }"
          @mouseenter="change()"
          @mouseleave="goback()"
        >
          {{ content }}
        </button>
      </div>
    </div>
  </div>

  <div class="des pang">
    <img
      src="https://cimg.axureshop.com/8d/be/1b/8dbe1b168ccf4f42b0439b5e6fb73ebf/images/%E9%A6%96%E9%A1%B5/u4384.svg"
      class="img"
    />
    <p>
      该阶段首先通过介绍不同领域的三种操作系统，操作系统的发展简史以及Linux系统的文件目录结构让大家对Linux系统有一个简单的认识
      ，同时知道为什么要学习Linux命令。然后我们会正式学习Linux命令然后我们还会学习单例模式这一设计模式，异常的捕获，异常的抛出，
      from import局部导入，from import导入同名工具， from
      import导入所有工具，包的使用，制作模块，pip的使用以及文件的相关操作。
    </p>
    <img
      src="https://cimg.axureshop.com/8d/be/1b/8dbe1b168ccf4f42b0439b5e6fb73ebf/images/%E9%A6%96%E9%A1%B5/u4384.svg"
      class="img"
    />
    <p>
      该阶段首先通过介绍不同领域的三种操作系统，操作系统的发展简史以及Linux系统的文件目录结构让大家对Linux系统有一个简单的认识
      ，同时知道为什么要学习Linux命令。然后我们会正式学习Linux命令然后我们还会学习单例模式这一设计模式，异常的捕获，异常的抛出，
      from import局部导入，from import导入同名工具， from
      import导入所有工具，包的使用，制作模块，pip的使用以及文件的相关操作。
    </p>
  </div>
  <div class="read">
    <span>相关阅读</span>
    <van-card
      @click="tiaozhuan"
      class="i"
      v-for="item in list"
      :key="item"
      price="Daisy"
      currency=""
      desc="出去走走，看看不同的风景，接触不同的人和事，你会发现，你的烦恼原来是那么微不足道。从现在开始，不沉溺幻想，不庸人自扰，好好生活，做一个接近幸福的人"
      title="行业观察"
      thumb="https://cimg.axureshop.com/8d/be/1b/8dbe1b168ccf4f42b0439b5e6fb73ebf/images/%E9%A6%96%E9%A1%B5/u4384.svg"
    >
      <template #footer>
        <van-icon name="eye-o" size="22" />
      </template>
    </van-card>
    <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
    </van-list>
  </div>
  <comments></comments>
  <comementBox></comementBox>
</template>

<script>
import Comments from './comments.vue'
import ComementBox from './CommentBox.vue'
import { Card } from 'vant'
import { List } from 'vant'
import { ref } from 'vue'
import { ShareSheet } from 'vant'
import { Toast } from 'vant'
export default {
  components: {
    Comments,
    ComementBox,
  },
  setup() {
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)
    const onClickLeft = () => history.back()
    const showShare = ref(false)
    const options = [
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ]
    const onSelect = (option) => {
      Toast(option.name)
      showShare.value = false
    }

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 3; i++) {
          list.value.push(list.value.length + 1)
        }

        // 加载状态结束
        loading.value = false

        // 数据全部加载完成
        if (list.value.length >= 3) {
          finished.value = true
        }
      }, 1000)
    }

    return {
      list,
      onLoad,
      loading,
      finished,
      options,
      onSelect,
      showShare,
      onClickLeft,
    }
  },

  data() {
    return {
      liked: false,
      content: '+关注',
      bg_color: '#fef0f0',
      ft_color: '#f56c6c',
    }
  },

  methods: {
    tiaozhuan() {
      this.$router.push({ path: '/article' })
    },
    shuaxing() {
      this.$router.push({ path: '/details' })
    },
    favor(e) {
      this.liked = !this.liked
      if (this.liked) {
        this.content = '已关注'
        this.bg_color = '#f56c6c'
        this.ft_color = '#fef0f0'
      } else {
        this.content = '+关注'
        this.bg_color = '#fef0f0'
        this.ft_color = '#f56c6c'
      }
    },
    change() {
      this.bg_color = '#ff9999'
      this.ft_color = '#fef0f0'
    },
    goback() {
      if (this.liked) {
        this.bg_color = '#f56c6c'
        this.ft_color = '#fef0f0'
      } else {
        this.bg_color = '#fef0f0'
        this.ft_color = '#f56c6c'
      }
    },
  },
}
</script>

<style>
.read {
  border-bottom: 0.1em solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 6px;
}
.pang {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.img {
  background: #666ee8;
  display: block;
  height: 12em;
  width: 100%;
}
.i {
  background: lightblue;
}
.header {
  margin: 0, auto;
  padding-top: 0.2em;
  display: flex;
  justify-content: space-between;
  vertical-align: middle;

  box-sizing: border-box;
}
.h {
  font-size: 1.2em;
  color: dimgrey;
}
.cen {
  display: flex;
  align-items: center;
}
.span {
  font-size: 1.2em;
  position: absolute;
  top: 0.8em;
}
.min-span {
  font-size: 0.8em;
  color: #999;
}
.h3 {
  font-size: 1.2em;
  display: block;
  padding-top: 0.8em;
}
.float {
  float: left;
}
.box {
  margin-left: 0.6em;
}
.r {
  float: right;
  padding-top: 1.5em;
}
.des {
  border-bottom: 0.1em solid #ccc;
}

button {
  outline: none;
}

.my_button {
  color: #f56c6c;
  background: #fef0f0;
  border: #fbc4c4 solid;
  border-radius: 20px;
  padding: 12px 23px;
  text-align: center;
  font-size: 16px;
  -webkit-transform: scale(0.7);
}
</style>
